import { useContext } from 'react';
import { ReactSVG } from 'react-svg';
import styles from './index.module.less';
import { Context } from '../../core/Context';
import { DrawType } from './config';

import lineIcon from './../../../public/line.svg';
import polyLineIcon from './../../../public/poly_line.svg';
import arcIcon from './../../../public/arc.svg';
import curveIcon from './../../../public/curve.svg';
import rectIcon from './../../../public/rect.svg';
import circleIcon from './../../../public/circle.svg';
import textIcon from './../../../public/text.svg';
import Mx from 'mxdraw';

const Tool = () => {
  const { workspace, canvas, drawTool, setState } = useContext(Context);

  // const disabledPen = useMemo(() => {
  //   if (!workspace || !workspace.workspace) return true;
  //   return type === PageType.view;
  // }, [workspace, workspace?.workspace]);

  // const stop = () => {
  //   if (!workspace) {
  //     return;
  //   }

  //   setState({ drawMode: '' });
  //   workspace.drawLine.stop();
  // };

  // const drawPenceil = useCallback((type: string) => {
  //   if (!workspace) {
  //     return;
  //   }

  //   if (drawMode === type) {
  //     stop();
  //   } else {
  //     workspace.drawLine.start(type, () => {
  //       setState({ drawMode: '' });
  //     });
  //     setState({ drawMode: type });
  //   }
  // }, [ workspace, drawMode ]);

  const handlerDraw = async () => {
    // 实例化
    let poly_line = new Mx.MxDbPolyline()
    const getPoint = new Mx.MrxDbgUiPrPoint()
    // 连续取点
    while (true) {
        // 多义线添加顶点
        let pt = await getPoint.go()
        if (!pt) break;
        poly_line.addVertexAt(pt)
        getPoint.setUserDraw((currentPoint, worldDrawComment) => {
            // 克隆多义线
            let pl = poly_line.clone()
            pl.addVertexAt(currentPoint)
            worldDrawComment.drawCustomEntity(pl)
        });
    }
    // 将多义线添加到画布
    Mx.MxFun.getCurrentDraw().addMxEntity(poly_line)
  };

  const handlerDrawLine = async () => {
    let line = new Mx.MxDbLine()
    const getPoint = new Mx.MrxDbgUiPrPoint()
    const pt1 = await getPoint.go()
    if (!pt1) return
    // 设置线段的起始点
    line.setPoint1(pt1);
    // 设置颜色
    line.setColor(0xFF22);
    // 动态绘制函数
    getPoint.setUserDraw((currentPoint, worldDrawComment) => {
        // 设置线段第二个点位置
        line.setPoint2(currentPoint);
        // 绘制线段对象
        worldDrawComment.drawCustomEntity(line);
    })
    // 将第二次鼠标点击的位置设置为线段的结束点
    const pt2 = await getPoint.go()
    if(!pt2) return
    line.setPoint2(pt2)
    // 获取控件对象并将线段对象line添加到画布中
    Mx.MxFun.getCurrentDraw().addMxEntity(line);
  };

  const handlerDrawRect = () => {
    setState({ drawMode: DrawType.rect });
    drawTool && drawTool.active(DrawType.rect);
  };

  const handlerDrawCircle = () => {
    setState({ drawMode: DrawType.circle });
    drawTool && drawTool.active(DrawType.circle);
  };

  const handlerDrawArc = () => {
    setState({ drawMode: DrawType.arc });
    drawTool && drawTool.active(DrawType.arc);
  };

  const handlerDrawCurve = () => {
    setState({ drawMode: DrawType.curve });
    drawTool && drawTool.active(DrawType.curve);
  };

  const handlerAddText = () => {

  };

  return (
    <div className={styles.tool}>
      <ReactSVG onClick={handlerDrawRect} className={styles.icon} src={rectIcon} />
      <ReactSVG onClick={handlerDrawCircle} className={styles.icon} src={circleIcon} />
      <ReactSVG onClick={handlerDrawLine} className={styles.icon} src={lineIcon} />
      <ReactSVG onClick={handlerDraw} className={styles.icon} src={polyLineIcon} />
      <ReactSVG onClick={handlerDrawArc} className={styles.icon} src={arcIcon} />
      {/* <ReactSVG onClick={handlerDrawCurve} className={styles.icon} src={curveIcon} /> */}
      {/* <ReactSVG onClick={handlerAddText} className={styles.icon} src={textIcon} /> */}
    </div>
  );
};

export default Tool;